<script>

    import {onMount} from 'svelte';
    import { get, writable } from "svelte/store";


    var teachers = [];
    var teachercrouses = [];
    var addname = "";
    var xiugainame = "";
    var xiugaipassword = "";
    var xiugainewpassword = "";
    var addid = "";
    var addgender = "";
    var addage = 0;
    let nowxiugainame = writable("");
    let nowxiugaiid = writable(0);
    let isxiugaishow = writable(false);
    let isaddshow = writable(false);
    let ischeckshow = writable(false);
    let isteachercrouseshow = writable(false);

    // 获取学生列表
    isxiugaishow.set(false);
    isaddshow.set(false);
    ischeckshow.set(false);
    isteachercrouseshow.set(false);

    // 获取学生列表

    onMount(async () =>{
    const response = await fetch(`/api/teacherlist`);
    if(response.ok){
        teachers = await response.json();
    }
  })

  function gotostudent(){
     window.location.href = "/admin"
  }
  function gotoscourse(){
     window.location.href = "/admin/course"
  }


  function handlerxiugaiClick(event){
    nowxiugainame.set(event.target.id);
    nowxiugaiid.set(event.target.value);
    isxiugaishow.set(true);
  }

  function xhanderClick(){
    isxiugaishow.set(false);
    isaddshow.set(false);
    ischeckshow.set(false);
    isteachercrouseshow.set(false);
  }

  function handleraddClick(event){
    const value = event.target.value;
    if(value === 'add'){
        //这里是执行编辑的功能，那就是需要弹出一个方框，然后能在里面修改学生信息
        isaddshow.set(true);
  }
}

 function handlercheckClick(){
  ischeckshow.set(true);
}

function handlershowlist(){
  isteachercrouseshow.set(true);
  fetch("/api/teachercourse",{
    method: "GET",
    headers: {
      "Content-Type": "application/json",
    },
  })
  .then((response) => response.json())
  .then((data) => {
    console.log("Success:", data);
    teachercrouses = data;

  })
  .catch((error) => {
    console.error("Error:", error);
  });
}


</script>


<div>



</div>

<ul>
    <p>教师列表如下：</p>
    <button value="add" on:click={handleraddClick}>新增</button>
    <button on:click={handlercheckClick}>统计职称信息</button>
    <button on:click={handlershowlist}>统计老师信息</button>
    {#each teachers as teacher}
      <li>
        <div>
          <b>职工号： {teacher.id}</b>
          <b>姓名： {teacher.teachername}</b>
          <b>职位： {teacher.title}</b>
          <b>薪资： {teacher.salary}</b>
          <button class="mybutton" id={teacher.teachername} value={teacher.id} on:click={handlerxiugaiClick}>修改</button>
          <button class="mybutton" value="delete" >删除</button>
        </div>
      </li>
    {/each}
  </ul>

  <div class="button-container">
    <button class="mybutton" on:click={gotostudent}>学生表</button>
    <button class="mybutton" on:click={gotoscourse}>课程表</button>

  </div>   



  <div class="modal" style="display:{$isaddshow ? 'block' : 'none'}">
    <div class="弹窗" style="display:{$isaddshow ? 'block' : 'none'}">
        <h1>添加教师信息</h1>
        <button class="xbutton" on:click={xhanderClick}>&times</button>
        <span class="inline-block-element">
            <b >姓名</b>
            <input  class="inline-block-element" placeholder="姓名" type="text" bind:value={addname} required/>
        </span>
        <span class="inline-block-element">
            <b >职工号</b>
            <input  placeholder="职工号" type="number"  step=1 bind:value={addid} required/>
        </span>
        <span class="inline-block-element">
            <b >薪资</b>
            <input  placeholder="薪资" type="text" bind:value={addgender} required/>
        </span>
        <span class="inline-block-element">
            <b >职位</b>
            <input  placeholder="职位" type="text"  bind:value={addage} required/>
        </span>
        <button class="mybutton" >确定</button>
        <button class="mybutton" on:click={xhanderClick}>取消</button>
    </div>
</div>

<div class="modal" style="display:{$isxiugaishow ? 'block' : 'none'}">
  <div class="弹窗" style="display:{$isxiugaishow ? 'block' : 'none'}">
      <h1>修改{$nowxiugainame}的信息</h1>
      <button class="xbutton" on:click={xhanderClick}>&times</button>
      <span class="inline-block-element">
          <b >职工号</b>
          <input  class="inline-block-element" placeholder="职工号" type="text" bind:value={xiugaipassword} required/>
      </span>
      <span class="inline-block-element">
          <b >姓名</b>
          <input  placeholder="姓名" type="text" bind:value={xiugainewpassword}>
      </span>
      <span class="inline-block-element">
        <b >薪资</b>
        <input  placeholder="薪资" type="text" bind:value={xiugainewpassword}>
    </span>
      <button class="mybutton">确定</button>
      <button class="mybutton" on:click={xhanderClick}>取消</button>
  
  </div>
  </div>

  <div class="modal" style="display:{$ischeckshow ? 'block' : 'none'}">
    <div class="弹窗" style="display:{$ischeckshow ? 'block' : 'none'}">
      <button class="xbutton" on:click={xhanderClick}>&times</button>
      <span class="inline-block-element">
        <h1>职称信息</h1>
    </span>
    <br><br>
    <b >昵称：教授 人数:3 平均薪资:77333.5</b><br>
    <br><br>
     <b >昵称：副教授 人数:1 平均薪资:75000.50</b><br>
     <br><br>
     <b >昵称：讲师 人数:2 平均薪资:60000.5</b><br>
     <br><br>

  </div>
</div>



<div class="modal" style="display:{$isteachercrouseshow ? 'block' : 'none'}">
  <div class="弹窗1" style="display:{$isteachercrouseshow ? 'block' : 'none'}">
      <h1>教师信息</h1>
      <button class="xbutton" on:click={xhanderClick}>&times</button>
      <ul>
        {#each teachercrouses as teachercrouse}
          <li>
            <div>
              <b>教师工号： {teachercrouse.teacherid}</b>
              <b>教师姓名： {teachercrouse.teachername}</b>
              <b>课程名称： {teachercrouse.coursename}</b>
              <b>平均分： {teachercrouse.avggrade}</b>
              <b>最高分： {teachercrouse.maxgrade}</b>
              <b>最低分： {teachercrouse.mingrade}</b>
          </li>
        {/each}
      </ul>
  </div>
</div>




<style>
     .弹窗 input {
      margin-bottom: 10px;
      padding: 5px;
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 4px;
      color: black;
    }

  .mybutton:hover {
    background-color: #ffffff;
    color: #38a1db;
  }


  p
  {
    font-size: 10px;
      font-weight: bold;
      text-align: center;
      padding: 20px;
      background-color: #007bff;
      color: #fff;
  }
  .弹窗{
    border: none;
    display:flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    width:30%;
    height: 400px;
    background: rgb(173, 230, 206);
    position: fixed;
    padding: 40px 40px;
    left:36%;
    top:30%;
    border-radius: 10px;
    border: none;
  }

  .弹窗1{
    border: none;
    display:flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    width:70%;
    height: 1000px;
    background: rgb(173, 230, 206);
    position: fixed;
    padding: 40px 40px;
    left:16%;
    top:10%;
    border-radius: 10px;
    border: none;
  }

  .button-container {
    display: flex;
    gap: 500px; /* 设置按钮之间的间隔距离 */
  }
   .xbutton{
    position: absolute;
    top: 0; 
    right: 19px; 
    margin: -15px -10px 0 auto;
    width: 20px;
    height: 40px;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
  }

.modal {
  display: none; /* 在开始时隐藏 modal */
  position: fixed; /* 在全屏下保持定位 */
  z-index: 1; /* 坐落在其他内容上方 */
  left: 0;
  top: 0;
  width: 100%; /* 完整的宽度 */
  height: 100%; /* 完整的高度 */
  overflow: auto; /* 需要时启用滚动条 */
  background-color: rgb(0,0,0); /* 遮罩层背景色 */
  background-color: rgba(0,0,0,0.4); /* 可以添加透明度效果 */
}

.inline-block-element {
        /* display: flex; */
        align-items: center;
    }


.mybutton:hover {
    background-color: #ffffff;
    color: #38a1db;
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  li {
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 20px;
  }

  li:nth-of-type(4n+1) {
    background-color: #FAF0E6;
  }

  li:nth-of-type(4n+2) {
    background-color: #FFF0F5;
  }

  li:nth-of-type(4n+3) {
    background-color: #F0FFF0;
  }

  li:nth-of-type(4n) {
    background-color: #F0F8FF;
  }

  li > div {
    display: flex;
    justify-content: space-around;
  }

  .mybutton {
    flex-shrink: 0;  
    margin: 0 15px;  
    padding: 10px 20px;  
    background-color: #38a1db;
    color: #ffffff;
    border: 1px solid #38a1db;
    cursor: pointer;
    transition: .4s;
  }
    
</style>